<template>
    <el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
    <el-col :span="12" class="mb20">
      <el-form-item prop="prodId" :label="$t('Sku.prodId')">
        <el-input v-model="form.prodId" :placeholder="$t('Sku.inputProdIdTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="state" :label="$t('Sku.state')">
        <el-input v-model="form.state" :placeholder="$t('Sku.inputStateTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="properties" :label="$t('Sku.properties')">
        <el-input v-model="form.properties" :placeholder="$t('Sku.inputPropertiesTip')" clearable show-word-limit :maxlength="1024"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="skuName" :label="$t('Sku.skuName')">
        <el-input v-model="form.skuName" :placeholder="$t('Sku.inputSkuNameTip')" clearable show-word-limit :maxlength="128"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="prodName" :label="$t('Sku.prodName')">
        <el-input v-model="form.prodName" :placeholder="$t('Sku.inputProdNameTip')" clearable show-word-limit :maxlength="128"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="desc" :label="$t('Sku.desc')">
        <el-input v-model="form.desc" :placeholder="$t('Sku.inputDescTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="pic" :label="$t('Sku.pic')">
        <el-input v-model="form.pic" :placeholder="$t('Sku.inputPicTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="originAmount" :label="$t('Sku.originAmount')">
        <el-input v-model="form.originAmount" :placeholder="$t('Sku.inputOriginAmountTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="amount" :label="$t('Sku.amount')">
        <el-input v-model="form.amount" :placeholder="$t('Sku.inputAmountTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="virtualStock" :label="$t('Sku.virtualStock')">
        <el-input v-model="form.virtualStock" :placeholder="$t('Sku.inputVirtualStockTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="actualStocks" :label="$t('Sku.actualStocks')">
        <el-input v-model="form.actualStocks" :placeholder="$t('Sku.inputActualStocksTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="sellCount" :label="$t('Sku.sellCount')">
        <el-input v-model="form.sellCount" :placeholder="$t('Sku.inputSellCountTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="weight" :label="$t('Sku.weight')">
        <el-input v-model="form.weight" :placeholder="$t('Sku.inputWeightTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="volume" :label="$t('Sku.volume')">
        <el-input v-model="form.volume" :placeholder="$t('Sku.inputVolumeTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="buyMinLimit" :label="$t('Sku.buyMinLimit')">
        <el-input v-model="form.buyMinLimit" :placeholder="$t('Sku.inputBuyMinLimitTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="buyMaxLimit" :label="$t('Sku.buyMaxLimit')">
        <el-input v-model="form.buyMaxLimit" :placeholder="$t('Sku.inputBuyMaxLimitTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item prop="sort" :label="$t('Sku.sort')">
        <el-input v-model="form.sort" :placeholder="$t('Sku.inputSortTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="SkuDialog">
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/bizs/Sku'
const emit = defineEmits(['refresh']);

// 定义i18n
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// 定义字典
import { useDict } from '/@/hooks/dict';

// 定义变量内容
const visible = ref(false)
const loading = ref(false)
const dataFormRef = ref();

// 提交表单数据
const form = reactive({
	id: '',
	prodId: '',
	state: '',
	properties: '',
	skuName: '',
	prodName: '',
	desc: '',
	pic: '',
	originAmount: '',
	amount: '',
	virtualStock: '',
	actualStocks: '',
	sellCount: '',
	weight: '',
	volume: '',
	buyMinLimit: '',
	buyMaxLimit: '',
	sort: '',
});

// 定义校验规则
import { rule } from '/@/utils/validate';
const dataRules = ref({
    prodId: [ {required: false, message: t('Sku.inputProdIdTip'), trigger: 'blur'} ],
    state: [ {required: false, message: t('Sku.inputStateTip'), trigger: 'blur'} ],
    properties: [ {required: false, message: t('Sku.inputPropertiesTip'), trigger: 'blur'} ],
    skuName: [ {required: false, message: t('Sku.inputSkuNameTip'), trigger: 'blur'} ],
    prodName: [ {required: false, message: t('Sku.inputProdNameTip'), trigger: 'blur'} ],
    desc: [ {required: false, message: t('Sku.inputDescTip'), trigger: 'blur'} ],
    pic: [ {required: false, message: t('Sku.inputPicTip'), trigger: 'blur'} ],
    originAmount: [ {required: false, message: t('Sku.inputOriginAmountTip'), trigger: 'blur'} ],
    amount: [ {required: false, message: t('Sku.inputAmountTip'), trigger: 'blur'} ],
    virtualStock: [ {required: false, message: t('Sku.inputVirtualStockTip'), trigger: 'blur'} ],
    actualStocks: [ {required: false, message: t('Sku.inputActualStocksTip'), trigger: 'blur'} ],
    sellCount: [ {required: false, message: t('Sku.inputSellCountTip'), trigger: 'blur'} ],
    weight: [ {required: false, message: t('Sku.inputWeightTip'), trigger: 'blur'} ],
    volume: [ {required: false, message: t('Sku.inputVolumeTip'), trigger: 'blur'} ],
    buyMinLimit: [ {required: false, message: t('Sku.inputBuyMinLimitTip'), trigger: 'blur'} ],
    buyMaxLimit: [ {required: false, message: t('Sku.inputBuyMaxLimitTip'), trigger: 'blur'} ],
    sort: [ {required: false, message: t('Sku.inputSortTip'), trigger: 'blur'} ],
})

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true
  	form.id = ''

  	// 重置表单数据
 	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  	// 获取信息
  	if (id) {
		form.id = id
		initFormData(id)
  	}
};

// 初始化表单
const initFormData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 提交表单
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
    loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? t('common.editSuccessText') : t('common.addSuccessText'));
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 暴露变量
defineExpose({
  openDialog
});
</script>
